<template>
	<view class="page_bg">
		<z-paging ref="paging" class="z_pag" v-model="addressList" @query="getList" :empty-view-fixed="true"
			:hide-loading-more-when-no-more-by-limit="5">
			<view class="address_item" v-for="item in addressList" @tap="backBuy">
				<view class="top">
					<view class="title">
						<text>{{item.name}}</text>
						<text class="text_2">{{item.phone_number}}</text>
						<text class="default_adress" v-if="item.is_default == 1">默认</text>
					</view>
					<view class="desc">{{item.province + item.city + item.area + item.detail}}</view>
				</view>
				<view class="end">
					<u-icon name="trash" color="#263147" size="28" label="删除" label-size="24" @tap="openPop(item._id)">
					</u-icon>
					<u-icon name="zhuanfa" color="#263147" size="28" label="编辑" label-size="24"
						@tap="changeAddress('edit',item._id)">
					</u-icon>
				</view>
			</view>
		</z-paging>

		<u-modal v-model="show" content="确认删除地址？" show-cancel-button @confirm="remove()" @cancel="selectId = ''">
		</u-modal>

		<view class="save_bg">
			<u-button class="save_btn" shape="circle" :ripple="true" ripple-bg-color="#444" @tap="changeAddress('add')">
				+添加地址
			</u-button>
		</view>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				addressList: [],
				selectId: '',

				show: false,
				canBack: false
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				if (options.buy == '1') this.canBack = true
				// 从其他页面返回时刷新
				uni.$on('addressUpdate', (data) => {
					that.$refs.paging.reload()
				})
			},
			// 获取列表
			getList(pageNo, pageSize) {
				vk.callFunction({
					url: 'client/address/kh/getList',
					data: {
						pageNo,
						pageSize,
						need_user_info: true
					},
					success(data) {
						that.$refs.paging.complete(data.rows);
					}
				});
			},
			// 跳转修改页面
			changeAddress(type, id) {
				vk.navigateTo(`/pages/mine/setting/change-address?type=${type}&id=${id}`)
			},
			// 删除确认弹框
			openPop(id) {
				this.selectId = id
				this.show = true
			},
			// 删除地址
			remove() {
				vk.callFunction({
					url: 'client/address/kh/remove',
					data: {
						id: that.selectId,
						need_user_info: true
					},
					success(data) {
						that.$refs.paging.reload()
					}
				});
			},
			backBuy() {
				if (this.canBack) vk.navigateBack()
			}
		},
		onUnload() {
			uni.$off('addressUpdate')
		}
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		height: 100vh;
		background: #F4F6F9;

		.z_pag {
			height: calc(100vh - 158rpx);
			padding: 30rpx 20rpx;
		}

		.address_item {
			margin-bottom: 30rpx;

			.top {
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 2rpx;

				.title {
					font-size: 30rpx;
					font-weight: bold;
					line-height: 42rpx;
					color: #140005;

					.text_2 {
						margin: 0 20rpx 0 54rpx;
					}

					.default_adress {
						padding: 2rpx 8rpx;
						color: rgb(255, 255, 255);
						font-size: 20rpx;
						background-color: rgb(7, 161, 255);
						border-radius: 4rpx;
					}
				}

				.desc {
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
					margin-top: 20rpx;
				}
			}

			.end {
				height: 86rpx;
				padding: 21rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				.u-icon {
					padding: 0 20%;
				}
			}

			.end::after {
				content: '';
				position: absolute;
				top: 21rpx;
				left: calc(50% - 2rpx);
				width: 2rpx;
				height: calc(100% - 42rpx);
				background-color: #F0F0F0;
			}
		}
	}

	.save_bg {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx;
		background: #F4F6F9;

		.save_btn {
			background-color: #333333;
			color: #FFFFFF;
			height: 70rpx;
			width: 88%;
		}
	}
</style>
